<template>
    <div id="courseDetails">
        <div class="matter">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>辅导培训</el-breadcrumb-item>
                    <el-breadcrumb-item>慕课学习</el-breadcrumb-item>
                    <el-breadcrumb-item>课程详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 头部详情 -->
            <div class="head">
                <div class="title">成人零基础毛笔书法入门</div>
                <div class="bottom">
                    <div class="browse">观看次数：9365</div>
                    <div class="operation">
                        <div @click="getPraise">
                            <i class="iconfont icon-dianzan" v-show="!praiseShow"></i>
                            <i class="iconfont icon-dianzan operationActive" v-show="praiseShow"></i>
                            9300
                        </div>
                        <div @click="getCollect">
                            <i class="iconfont icon-shoucang" v-show="!collectShow"></i>
                            <i class="iconfont icon-shoucang operationActive" v-show="collectShow"></i>
                            8972
                        </div>
                        <div @click="getShare">
                            <i class="iconfont icon-fenxiang" v-show="!shareShow"></i>
                            <i class="iconfont icon-fenxiang operationActive" v-show="shareShow"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 目录 -->
            <div class="catalogue">
                <ol>
                    <li style="display: block;" v-if="active == 0"><img src="./image/zuogediaocha.png" alt=""></li>
                    <li v-if="active == 1"><video src="https://sywhgapi.elongtian.com/data/uploads/video/20210423/3dd4ce4e722bf679eaaa7de7a6cc0fb3.mp4" type="video/mp4"></video></li>
                    <li v-if="active == 2">成人零基础毛笔书法入门</li>
                    <li v-if="active == 3">硬笔正楷书写技巧与练习</li>
                    <li v-if="active == 4">毛笔书法的入门与鉴赏</li>
                </ol>
                <ul>
                    <li class="title">课程详情</li>
                    <li class="collapse">
                        <el-collapse accordion v-model="collapseActive">
                            <el-collapse-item title="01 - 毛笔、纸张和字帖的选择" name="1">
                                <div :class="active==0?'active':''" @click="tabs(0)">1.毛笔的选择与保护</div>
                                <div :class="active==1?'active':''" @click="tabs(1)">2.纸张的选择</div>
                                <div :class="active==2?'active':''" @click="tabs(2)">3.选择合适的字帖进行练习</div>
                                <div :class="active==3?'active':''" @click="tabs(3)">4.初学期如何练习</div>
                            </el-collapse-item>
                            <el-collapse-item title="02 - 练习过程中的注意事项" name="2">
                                <div>1.毛笔的选择与保护</div>
                                <div>2.纸张的选择</div>
                                <div>3.选择合适的字帖进行练习</div>
                            </el-collapse-item>
                            <el-collapse-item title="03 - 练习毛笔字的基本技能要求" name="3">
                                <div>1.毛笔的选择与保护</div>
                                <div>2.纸张的选择</div>
                            </el-collapse-item>
                            <el-collapse-item title="04 - 楷书的字体结构" name="4">
                                <div>1.毛笔的选择与保护</div>
                            </el-collapse-item>
                            <!-- <el-collapse-item title="05 - 隶书的字体结构"></el-collapse-item name="5"> -->
                        </el-collapse>
                    </li>
                </ul>
            </div>
            <!-- 内容列表介绍 -->
            <div class="substanceCourse">
                <!-- 课程介绍 -->
                <div class="referral">
                    <div class="title">课程介绍</div>
                    <div class="detailsReferral"><img src="./image/xiangqingjieshao.png" alt=""></div>
                </div>
                <div class="teacherRecommend">
                    <!-- 课程老师介绍 -->
                    <div class="teacherReferral">
                        <div class="title">课程老师介绍</div>
                        <div class="teacherList">
                            <div class="left"><img src="./image/zuogediaocha.png" alt=""></div>
                            <div class="right">
                                <div class="name">王善举</div>
                                <div class="reputation">国家一级演员</div>
                                <div class="abstract">"解放初，王善举拜曲艺老艺人金晓珊为师，下海唱单弦。并通过师兄曹宝禄与曲艺、京剧界常连安、李润杰、李万</div>
                            </div>
                        </div>
                    </div>
                    <!-- 相关课程推荐 -->
                    <div class="recommend">
                        <div class="title">相关课程推荐</div>
                        <div class="recommendList">
                            <img src="./image/zuogediaocha.png" alt="">
                            <div class="base">
                                <div class="headline">成人零基础毛笔书法入门</div>
                                <div class="phase"><div>零基础</div></div>
                                <div class="bottom">
                                    <div class="browse"><i class="el-icon-view"></i>9365</div>
                                    <div class="button" @click="onlineWatch"><div>在线观看</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            praiseShow: false, // 点赞样式控制
            collectShow: false, // 收藏样式控制
            shareShow: false, // 分享样式控制
            collapseActive: '1',// 默认展开name为1的折叠板
            active: 0, // 切换目录选项卡
        };
	},
    mounted(){
        // this.getPageNumber() // 共几页
    },
	methods: {
        // 点赞样式控制
        getPraise(){
           this.praiseShow = true
        },
        // 收藏样式控制
        getCollect(){
           this.collectShow = true
        },
        // 分享样式控制
        getShare(){
           this.shareShow = true
        },
        // 切换目录选项卡
        tabs(index){
            this.active = index
        },
		// 点击在线观看
		onlineWatch(){
			console.log("在线观看")
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #courseDetails{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin: 1.5% 0%;
            }
            // 头部详情
            .head{
                width: 100%;
                .title{
                    color: #F19417;
                    font-size: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 500;
                }
                .bottom{
                    display: flex;
                    color: #918E8A;
                    margin: 0.5% 0%;
                    .browse{
                        flex: 5;
                    }
                    .operation{
                        flex: 1;
                        display: flex;
                        div{
                            flex: 1;
                            text-align: center;
                            .operationActive{
                                color: #F19417;
                            }
                            i{
                                margin-right: 5%;
                            }
                        }
                    }
                }
            }
            // 目录
            .catalogue{
                display: flex;
                ol{
                    flex: 3;
                    li{
                        width: 100%;
                        height: 350px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        video{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                ul{
                    flex: 1;
                    .active{
                        color: #F19417;
                        background: #654A3A;
                    }
                    .title{
                        color: #CAA983;
                        padding-left: 10%;
                        line-height: 40px;
                        background: #37251B;
                    }
                    .collapse{
                        height: 310px;
                        padding-left: 10%;
                        overflow: auto;
                        color: #FAD5A5;
                        background: #654A3A;
                        /deep/.el-collapse{
                            border-top: 1px solid #654A3A;
                        }
                        /deep/.el-collapse-item__header{
                            color: #CAA983;
                            background: #654A3A;
                            border-bottom: 1px solid #654A3A;
                        }
                        /deep/.el-collapse-item__wrap,/deep/.el-collapse-item__content{
                            color: #CAA983;
                            background: #654A3A;
                            border-bottom: 1px solid #654A3A;
                            padding-left: 5%;
                            padding-bottom: 0%;
                        }
                    }
                    ::-webkit-scrollbar {
                        width: 10px;
                    }
                }
            }
            // 内容列表介绍
            .substanceCourse{
                display: flex;
                margin: 1% 0% 10% 0%;
                // 课程介绍
                .referral{
                    flex: 5;
                    .title{
                        padding: 1% 3%;
                        background: #EEEEEE;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 500;
                    }
                    .detailsReferral{
                        width: 100%;
                        text-align: center;
                        margin-top: 2%;
                        img{
                            width: 80%;
                        }
                    }
                }
                // 右部分：课程老师介绍and相关课程推荐
                .teacherRecommend{
                    flex: 2;
                    margin-left: 1%;
                    // 课程老师介绍
                    .teacherReferral{
                        .title{
                            padding: 3% 5%;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 500;
                        }
                        .teacherList{
                            padding: 3% 5%;
                            display: flex;
                            .left{
                                flex: 2;
                                width: 100%;
                                height: 120px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                }
                            }
                            .right{
                                flex: 3;
                                margin-left: 3%;
                                .name{
                                    margin-top: 6%;
                                }
                                .reputation{
                                    color: #999999;
                                    margin-top: 3%;
                                }
                                .abstract{
                                    color: #999999;
                                    margin-top: 6%;
                                    display: -webkit-box;    
                                    -webkit-box-orient: vertical;    
                                    -webkit-line-clamp: 3;    
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                    // 相关课程推荐
                    .recommend{
                        margin-top: 6%;
                        .title{
                            padding: 3% 5%;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 500;
                        }
                        .recommendList{
                            padding: 3% 5%;
                            margin: 1% 0.5%;
                            border-radius: 5px;
                            img{
                                width: 100%;
                                height: 150px;
                                border-top-left-radius: 5px;
                                border-top-right-radius: 5px;
                            }
                            .base{
                                padding: 0% 5%;
                                .headline{
                                    margin-top: 3%;
                                    font-size: 16px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    // 单行溢出隐藏
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                }
                                .phase{
                                    display: flex;
                                    font-size: 12px;
                                    margin-top: 2%;
                                    div{
                                        width: 20%;
                                        text-align: center;
                                        border-radius: 4px;
                                        color: #F19417;
                                        border: 1px solid #F19417;
                                    }
                                }
                                .bottom{
                                    display: flex;
                                    line-height: 25px;
                                    margin: 3% 0%;
                                    .browse{
                                        flex: 3;
                                        i{
                                            margin-right: 3%;
                                        }
                                    }
                                    .button{
                                        flex: 1;
                                        text-align: center;
                                        div{
                                            color: white;
                                            border-radius: 5px;
                                            background: #F19417;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #courseDetails{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin: 1.5% 0%;
            }
            // 头部详情
            .head{
                width: 100%;
                .title{
                    color: #F19417;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 500;
                }
                .bottom{
                    display: flex;
                    color: #918E8A;
                    margin: 0.5% 0%;
                    .browse{
                        flex: 5;
                    }
                    .operation{
                        flex: 1;
                        display: flex;
                        div{
                            flex: 1;
                            text-align: center;
                            .operationActive{
                                color: #F19417;
                            }
                            i{
                                margin-right: 5%;
                            }
                        }
                    }
                }
            }
            // 目录
            .catalogue{
                display: flex;
                ol{
                    flex: 3;
                    li{
                        width: 100%;
                        height: 300px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        video{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                ul{
                    flex: 1;
                    .active{
                        color: #F19417;
                        background: #654A3A;
                    }
                    .title{
                        color: #CAA983;
                        padding-left: 10%;
                        line-height: 36px;
                        background: #37251B;
                    }
                    .collapse{
                        height: 265px;
                        padding-left: 10%;
                        overflow: auto;
                        color: #FAD5A5;
                        background: #654A3A;
                        /deep/.el-collapse{
                            border-top: 1px solid #654A3A;
                        }
                        /deep/.el-collapse-item__header{
                            height: 42px;
                            line-height: 42px;
                            color: #CAA983;
                            background: #654A3A;
                            border-bottom: 1px solid #654A3A;
                        }
                        /deep/.el-collapse-item__wrap,/deep/.el-collapse-item__content{
                            color: #CAA983;
                            background: #654A3A;
                            border-bottom: 1px solid #654A3A;
                            padding-left: 5%;
                            padding-bottom: 0%;
                        }
                    }
                    ::-webkit-scrollbar {
                        width: 10px;
                    }
                }
            }
            // 内容列表介绍
            .substanceCourse{
                display: flex;
                margin: 1% 0% 8% 0%;
                // 课程介绍
                .referral{
                    flex: 5;
                    .title{
                        padding: 1% 3%;
                        background: #EEEEEE;
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 500;
                    }
                    .detailsReferral{
                        width: 100%;
                        text-align: center;
                        margin-top: 2%;
                        img{
                            width: 80%;
                        }
                    }
                }
                // 右部分：课程老师介绍and相关课程推荐
                .teacherRecommend{
                    flex: 2;
                    margin-left: 1%;
                    // 课程老师介绍
                    .teacherReferral{
                        .title{
                            padding: 3% 5%;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 500;
                        }
                        .teacherList{
                            padding: 3% 5%;
                            display: flex;
                            .left{
                                flex: 2;
                                width: 100%;
                                height: 110px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                }
                            }
                            .right{
                                flex: 3;
                                margin-left: 3%;
                                .name{
                                    margin-top: 4%;
                                }
                                .reputation{
                                    color: #999999;
                                    margin-top: 2%;
                                }
                                .abstract{
                                    color: #999999;
                                    margin-top: 4%;
                                    display: -webkit-box;    
                                    -webkit-box-orient: vertical;    
                                    -webkit-line-clamp: 3;    
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                    // 相关课程推荐
                    .recommend{
                        margin-top: 4%;
                        .title{
                            padding: 2% 5%;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 500;
                        }
                        .recommendList{
                            padding: 3% 5%;
                            margin: 1% 0.5%;
                            border-radius: 5px;
                            img{
                                width: 100%;
                                height: 130px;
                                border-top-left-radius: 5px;
                                border-top-right-radius: 5px;
                            }
                            .base{
                                padding: 0% 5%;
                                .headline{
                                    margin-top: 3%;
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    // 单行溢出隐藏
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                }
                                .phase{
                                    display: flex;
                                    font-size: 10px;
                                    margin-top: 2%;
                                    div{
                                        width: 20%;
                                        text-align: center;
                                        border-radius: 4px;
                                        color: #F19417;
                                        border: 1px solid #F19417;
                                    }
                                }
                                .bottom{
                                    display: flex;
                                    line-height: 22px;
                                    margin: 3% 0%;
                                    .browse{
                                        flex: 3;
                                        i{
                                            margin-right: 3%;
                                        }
                                    }
                                    .button{
                                        flex: 1;
                                        text-align: center;
                                        div{
                                            color: white;
                                            border-radius: 5px;
                                            background: #F19417;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>